 <template>
 <!--搜索 begin-->
 <div class="overflowY padding15">
  <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="searchTimeDiv">
          <el-date-picker
            v-model="searchTime"
            size="small"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchSelect" placeholder="请选择" size="small">
          <el-option
            v-for="item in optionsSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          size="small"
          placeholder="请输入标题"
          prefix-icon="el-icon-search"
          v-model="searchInputTitle">
        </el-input>
      </el-col>
      <el-col :span="4">
        <div class="btnFloatRight">
          <el-button type="primary" size="small">查询</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
   <base-card title="说明">
     <code>
       <span style="width: 100%;display: inline-block;">1、直接复制搜索群组，不需要的可以删除</span>
       <span style="width: 100%;display: inline-block;">2、搜索按钮样式 - 搜索按钮的外层div添加不同的class类名来外部按钮位置</span>
       <span style="width: 100%;display: inline-block;margin-left: 20px;">btnFloatLeft -- 居左</span>
       <span style="width: 100%;display: inline-block;margin-left: 20px;">btnFloatRight -- 居右</span>
       <span style="width: 100%;display: inline-block;margin-left: 20px;">btnFloatCenter -- 居中</span>
       <span style="width: 100%;display: inline-block;">3、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
     </code>
   </base-card>
   <base-card title="HTML">
     <pre><code>  &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>    &lt;el-row :gutter="20"&gt;<br>      &lt;el-col :span="6"&gt;<br>        &lt;div class="searchTimeDiv"&gt;<br>          &lt;el-date-picker<br>            v-model="searchTime"<br>            size="small"<br>            type="daterange"<br>            range-separator="-"<br>            start-placeholder="开始日期"<br>            end-placeholder="结束日期"&gt;<br>          &lt;/el-date-picker&gt;<br>        &lt;/div&gt;<br>      &lt;/el-col&gt;<br>      &lt;el-col :span="4"&gt;<br>        &lt;el-select v-model="searchSelect" placeholder="请选择" size="small"&gt;<br>          &lt;el-option<br>            v-for="item in optionsSelect"<br>            :key="item.value"<br>            :label="item.label"<br>            :value="item.value"&gt;<br>          &lt;/el-option&gt;<br>        &lt;/el-select&gt;<br>      &lt;/el-col&gt;<br>      &lt;el-col :span="4"&gt;<br>        &lt;el-input<br>          size="small"<br>          placeholder="请输入标题"<br>          prefix-icon="el-icon-search"<br>          v-model="searchInputTitle"&gt;<br>        &lt;/el-input&gt;<br>      &lt;/el-col&gt;<br>      &lt;el-col :span="4"&gt;<br>        &lt;div class="btnFloatRight"&gt;<br>          &lt;el-button type="primary" size="small"&gt;查询&lt;/el-button&gt;<br>        &lt;/div&gt;<br>      &lt;/el-col&gt;<br>    &lt;/el-row&gt;<br>  &lt;/div&gt;</code></pre>
   </base-card>
   <base-card title="JS">
     <pre><code>export default {<br>  data() {<br>    return {<br>      searchTime: '', // 时间选择<br>      searchSelect: '', // 下拉框<br>      optionsSelect: [ // 下拉框选项<br>        {<br>          value: '0',<br>          label: '下拉选项1'<br>        },<br>        {<br>          value: '1',<br>          label: '下拉选项2'<br>        },<br>        {<br>          value: '2',<br>          label: '下拉选项3'<br>        }<br>      ],<br>      searchInputTitle: '' // 带icon的搜索框<br>    }<br>  }<br>}</code></pre>
   </base-card>
   <base-card title="CSS">
     <pre><code>&lt;style scoped&gt;<br>   .searchTimeDiv &gt;&gt;&gt; div{<br>     width: 100%;<br>   }<br>   .btnFloatCenter{<br>     width: 100%;<br>     text-align: center;<br>   }<br>   .btnFloatLeft{<br>     width: 100%;<br>     text-align: left;<br>   }<br>   .btnFloatRight{<br>     width: 100%;<br>     text-align: right;<br>   }<br> &lt;/style&gt;</code></pre>
   </base-card>
 </div>
 <!--搜索 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    BaseCard
  },
  data() {
    return {
      searchTime: '', // 时间选择
      searchSelect: '', // 下拉框
      optionsSelect: [ // 下拉框选项
        {
          value: '0',
          label: '下拉选项1'
        },
        {
          value: '1',
          label: '下拉选项2'
        },
        {
          value: '2',
          label: '下拉选项3'
        }
      ],
      searchInputTitle: '' // 带icon的搜索框
    }
  }
}
</script>
 <style scoped>
   .searchTimeDiv >>> div{
     width: 100%;
   }
   .btnFloatCenter{
     width: 100%;
     text-align: center;
   }
   .btnFloatLeft{
     width: 100%;
     text-align: left;
   }
   .btnFloatRight{
     width: 100%;
     text-align: left;
   }
 </style>

